<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js"></script>
<style>
.layui-table-cell {
	height: 100px;
	width: 130px;
	max-width: 100%;
}
</style>
</head>
<body>
	<div hidden="hidden" class="layui-form-item" style="margin-top: 20px" onsubmit="false">
		<div class="layui-form-item">
			<label class="layui-form-label">名称编号：</label>
			<div class="layui-input-inline" style="width: 150px">
				<input type="text" name="Pid" id="Pid" class="layui-input"
					lay-verify="required" placeholder="请输入商品名称编号">
			</div>
			<button class="layui-btn" id="serach" data-type="reload">搜索</button>
		</div>
	</div>
	<table class="layui-hide" id="demo" lay-filter="demo"></table>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
  			<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
		</div>
	</script>
	<script type="text/html" id="img">
		<img src="{{d.url}}">
	</script>
	<script>
		layui.use('table', function() {
			var table = layui.table;
			var $ = layui.jquery;//引入jquery
			//执行渲染
			table.render({
				elem : '#demo' //指定原始表格元素选择器（推荐id选择器）
				,
				toolbar : '#toolbarDemo'//开启头部栏工具
				,
				url : '/shoppingsix/picture'//请求地址
				,
				method : 'POST',
				cols : [ [ {
					field : 'id',
					title : '编号',
					align : 'center',
					width : 65
				}, {
					field : 'Pname',
					title : '商品名称',
					align : 'center',
					width : 350
				}, {
					field : 'url',
					title : '图片',
					templet : '#img',
					align : 'center',
					width : 150,
				}, {
					field : 'url',
					title : '图片地址',
					align : 'center',
					width : 230
				}, {
					field : 'right',
					title : '操作',
					toolbar : '#barDemo',
					align : 'center',
					width : 150
				} ] ],
				page : true,
				id : 'testReload'
			//设置表头
			//,…… //更多参数参考右侧目录：基本参数选项
			});
			//监听头部工具栏
			table.on('toolbar(demo)', function(obj) {
				switch (obj.event) {
				case 'add':
					layer.open({//打开一个页面
						type : 2,//在当前页面打开一个页面
						area : [ '550px', '600px' ],//页面宽高
						content : 'picture_add.jsp',//页面地址
						title : '新增商品图',//打开页面标题
						success : function(layero, index) {
							var pid = $("#Pid").val();//上面搜索框的id
							console.log(pid);
							var body = layer.getChildFrame('body', index);
							body.contents().find("#Pid").val(pid);
						},
						end : function() {
							window.location.reload();//当窗口关闭后刷新页面
						}
					});
					break;
				}
				;
			});
			//监听工具条
			table.on('tool(demo)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				if (obj.event === 'del') { //删除
					layer.confirm('真的删除行么', function(index) {
						var url = '/shoppingsix/picture_del';//请求地址
						$.post(url, {
							id : obj.data.id,
						}, function(data) {
							if (data.count > 0) {
								console.log('删除成功');
								window.location.reload();//刷新页面
							}
						}, "json");
					});
				} else if (obj.event === 'edit') { //编辑
					layer.open({//打开一个页面
						type : 2,//在当前页面之上以弹框的形式，展示编辑页面
						area : [ '550px', '600px' ],//页面宽高
						content : 'picture_update.jsp',//页面所在位置
						title : '您正在编辑编号为' + obj.data.id + '的商品图信息',
						success : function(layero, index) {
							var body = layer.getChildFrame('body', index);
							body.contents().find("#id").val(obj.data.id);
							body.contents().find("#url").val(obj.data.url);
						},
						end : function() {
							window.location.reload();//当窗口关闭后刷新页面
						}
					});
				}
			});
			//设置按钮默认点击事件(打开页面时按钮默认被点击)
			setTimeout(function() {
				// IE
				if(document.all) {
				document.getElementById("serach").click();
				}
				// 其它浏览器
				else {
				var e = document.createEvent("MouseEvents");
				e.initEvent("click", true, true);
				document.getElementById("serach").dispatchEvent(e);
				}
				}, 0);
			$('#serach').on('click', function() {
				var Pid = $("#Pid").val();//上面搜索框的id
				table.reload('testReload', {//testReload,上面渲染逼格的id
					where : {//接口需要请求的参数
						'Pid' : Pid,
					}
				});
			});

		});
	</script>

</body>
</html>